<template>
  <el-dialog
    :title="form.id ? '编辑企划' : '新建企划'"
    :visible.sync="layoutVisible"
    width="400px"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      ref="form"
      label-position="left"
      label-width="120px"
    >
      
      <el-form-item label="企划名称" prop="date">
        <el-input v-model="form.date" style="width:220px" placeholder="请输入企划名称"></el-input>
      </el-form-item>
      <el-form-item label="最终完成日期" prop="ddltime">
        <el-date-picker
          v-model="form.ddltime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="default"
          @click="onCreation"
          :loading="loading"
          >{{form.id?"修改":"新建"}}</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { postApieditplanning } from "@/api";
export default {
  props: {
    layoutVisible: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: {
        date: "",
        ddltime: "",
      },
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    beforeClose() {
      let layoutForm = { date: "", ddltime: "" };
      this.$emit("ondialogFormVisible",layoutForm)
    },
    // 创建编辑企划
    onCreation() {
      this.loading = true;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = false;
          postApieditplanning(this.form)
            .then((res) => {
              console.log("编辑企划", res);
              if (this.form.id) {
                this.$message.success("编辑企划成功");
              } else {
                this.$message.success("新建企划成功");
              }
              this.$emit("postApigetplanning");
              this.beforeClose()
            })
            .catch((err) => {
              console.log("err", err);
              this.$message.warning(err.msg);
              this.loading = false;
            });
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>